<template>
	<view>
		<!-- 导航栏 -->
		<scroll-view scroll-x class="nav text-center" :class="'bg-'+basic.color">
			<view class="cu-item" :class="tab==='0'?'text-green cur':''" @tap="tabSelect('0')">系统信息</view>
			<view class="cu-item" :class="tab==='1'?'text-green cur':''" @tap="tabSelect('1')">程序日志</view>
		</scroll-view>
		
		<!-- 内容区 -->
		<view v-if="tab==='0'">
			<!-- 系统信息 -->
			<view class="solids-bottom padding-xs flex align-center">
				<view class="padding">
					<view>系</view>
					<view>统</view>
					<view>信</view>
					<view>息</view>
				</view>
				<view class="flex-sub">
					<view class="cu-list menu">
						<view class="cu-item">
							<view class="content">
								<view>服务器地址</view>
							</view>
							<view class="action">
								<text class="text-sm">{{ resData.system_info.public_ip }}</text>
							</view>
						</view>
						<view class="cu-item">
							<view class="content">
								<view>硬盘使用率</view>
							</view>
							<view class="action">
								<text class="text-sm">{{ resData.system_info.disk }}</text>
							</view>
						</view>
						<view class="cu-item">
							<view class="content">
								<view>内存使用率</view>
							</view>
							<view class="action">
								<text class="text-sm">{{ resData.system_info.mem }}</text>
							</view>
						</view>
						<view class="cu-item">
							<view class="content">
								<view>CPU使用率</view>
							</view>
							<view class="action">
								<text class="text-sm">{{ resData.system_info.cpu }}</text>
							</view>
						</view>
						<view class="cu-item">
							<view class="content">
								<view>系统负载{{ resData.system_info.cpu_number }}</view>
							</view>
							<view class="action">
								<text class="text-sm">{{ resData.system_info.system }}</text>
							</view>
						</view>
						<view class="cu-item">
							<view class="content">
								<view>接收流量</view>
							</view>
							<view class="action">
								<text class="text-sm">{{ resData.system_info.receive_network }}</text>
							</view>
						</view>
						<view class="cu-item">
							<view class="content">
								<view>发送流量</view>
							</view>
							<view class="action">
								<text class="text-sm">{{ resData.system_info.send_network }}</text>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 系统信息 -->
			
			<!-- 程序进程 -->
			<view :class="'bg-'+basic.color">
				<view class="text-center padding">程序进程</view>
			</view>
			<view v-if="resData.system_info.process.length > 0" class="cu-list menu">
				<view v-for=" (item, index) in resData.system_info.process" :key="index" class="cu-item">
					<view class="content">
						<text>PID: {{ item.pid }}</text>
					</view>
					<view class="action">
						<text class="text-sm">{{ item.status }}</text>
					</view>
				</view>
			</view>
			<view v-else style="margin-top: 5%;">
				<view class="padding-xs flex align-center">
					<view class="flex-sub text-center">
						<view class="text-xsl padding" @tap="switchEditPage">
							<text class="cuIcon-settings text-green"></text>
						</view>
						<view class="padding" style="font-size: 14px">点击上方按钮前往操作页面</view>
					</view>
				</view>
			</view>
			<!-- 程序进程 -->
			
		</view>
		<view v-else>
			<!-- 程序日志 -->
			<view class="solids-bottom padding-xs flex align-center">
				<view class="flex-sub">
					<view class="cu-list menu">
						<view v-for="(item, index) in resData.logs_name" :key="index" class="cu-item">
							<view class="content">
								<view @click="clickPreviewLogs(item)">{{ item }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 弹出框 -->
			<view class="cu-modal drawer-modal justify-start" :class="modal.show?'show':''"  @tap="modalNull" :style="'width:'+modal.width+'px'">
				<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:modal.top+'px',height:'calc(100vh - ' + modal.top+'px)'}]">
					<view class="cu-list menu text-left">
						<scroll-view scroll-y="true" @scrolltolower="lower" :style="'height: '+modal.height+'px; overscroll-behavior-y: contain;'" @touchmove.stop.prevent="() => {}">
							<view>
								<view class="cu-list menu" style="width:98%;">
									<view class="cu-item" v-for="(item, index) in modal.logs_content" :key="index">
										<view class="content" style="width:98%;">
											<text class="cuIcon-moreandroid text-green"></text>
											<text class="text-grey">{{ item }}</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { monitorSystem, monitorLog } from '@/api/basic/basic.js'
	export default {
		props: {
			basic: {}
		},
		data() {
			return {
				tab: '0',
				resData: {
					system_info: {
						disk: null,
						mem: null,
						cpu: null,
						system: null,
						cpu_number: 0,
						receive_network: null,
						send_network: null,
						process: []
					},
					logs_name: []
				},
				modal: {
					show: false,
					top: 0,
					width: null,
					height: 900,
					logs_content: [],
					logs_name: null,
					logs_page: 1
				}
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载中...',
			})
			console.log('监控', this.basic)
			
			// h5 app mp-alipay
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取微信小程序胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			const WindowInfo = uni.getWindowInfo()
			console.log('监控页获取微信小程序胶囊的位置设置弹出框', menuButtonInfo)
			this.modal.top = menuButtonInfo.bottom
			this.modal.width = WindowInfo.screenWidth + menuButtonInfo.width * 2
			this.modal.height = WindowInfo.screenHeight - menuButtonInfo.bottom
			// #endif
			
			this.getSystemData()
		},
		methods: {
			// 关闭弹出框
			modalNull() {
				this.modal.show = false
			},
			// 页面切换
			switchEditPage() {
				this.$emit("selectPage", {pages:1})
			},
			// 导航栏切换
			tabSelect(tabId) {
				uni.showLoading({
					title: '加载中...',
				})
				this.tab = tabId
				setTimeout(function () {
					uni.hideLoading();
				}, 1000);
			},
			getSystemData() {
				var _this = this
				uni.getStorage({
					key:_this.basic.exchange_domain + _this.basic.strategy_name,
					success(resVisit) {
						monitorSystem(resVisit.data.ip_address, resVisit.data.access, {
							exchange_domain: _this.basic.exchange_domain, strategy_name: _this.basic.strategy_name
						}).then(res => {
							console.log('获取监控页系统信息数据', res)
							_this.resData = res.data
							setTimeout(function () {
								uni.hideLoading();
							}, 2000);
						})
					},fail(errVisit) {
						console.log('监控页获取token失败.')
						uni.showToast({ icon:'none', title: 'Token获取失败' })
						setTimeout(function () {
							uni.reLaunch({
								url: '/pages/home/home'
							});
						}, 2000)
					}
				})
			},
			clickPreviewLogs(name) {
				console.log('点击预览日志', name)
				this.getPreviewLogs(name, 1)
			},
			lower() {
				console.log('触碰底部')
				this.getPreviewLogs(this.modal.logs_name, this.modal.logs_page + 1)
			},
			getPreviewLogs(name, page) {
				uni.showLoading({
					title: '加载中...',
				})
				var _this = this
				_this.modal.logs_name = name
				_this.modal.logs_page = page
				
				uni.getStorage({
					key:_this.basic.exchange_domain + _this.basic.strategy_name,
					success(resVisit) {
						monitorLog(resVisit.data.ip_address, resVisit.data.access, {
							exchange_domain: _this.basic.exchange_domain, strategy_name: _this.basic.strategy_name, 
							logs_name: _this.modal.logs_name, logs_page: _this.modal.logs_page
						}).then(res => {
							console.log('获取监控页日志信息', res)
							_this.modal.logs_content.push(res.data)
							_this.modal.show = true
							setTimeout(function () {
								uni.hideLoading();
								if (_this.modal.logs_page > 1 && res.data.length === 0) {
									uni.showToast({ icon:'none', title: '已经到底了' })
								}
							}, 2000);
							
						})
					},fail(errVisit) {
						console.log('监控页获取token失败.')
						uni.showToast({ icon:'none', title: 'Token获取失败' })
						setTimeout(function () {
							uni.reLaunch({
								url: '/pages/home/home'
							});
						}, 2000)
					}
				})
			}
		}
	}
</script>

<style>
	
</style>
